<template>
  <div class="home" >
    <HomeNavBar></HomeNavBar>
    <div class="banner">
      <img src="@/assets/img/home/banner.webp" alt="" />
    </div>
    <HomeSearchBox></HomeSearchBox>
    <HomeCategories></HomeCategories>

    <div class="searchBar" v-if="isShowSearchBar">
      <searchBar 
      :iconSearch = icon
      keyWordFontSize="14px"
      
      />
    </div>

    <HomeConent></HomeConent>
  </div>
</template>

<!-- <script>
export default { name: "home" };
</script> -->
<script setup>
  import { ref, watch, computed, onActivated } from 'vue'
  import useHomeStore from '@/stores/modules/home'
  import HomeCategories from './cpns/home_03-categories.vue'
  import HomeConent from './cpns/home_04-conent.vue'
  import HomeNavBar from './cpns/home_01-nav-bar.vue'
  import HomeSearchBox from './cpns/home_02-search-box.vue'
  import searchBar from '@/components/search-bar/search-bar.vue'
  import useScroll from '@/hooks/useScroll'
  const icon = ref(true)
  
  // 发送网络请求
  const homeStore = useHomeStore()
  homeStore.fetchHotSuggestsData()
  homeStore.fetchCategoriesData()
  homeStore.fetchHouseListData()

//   监听window窗口的滚动
// const homeRef = ref();

  const { isReachBottom, scrollTop } = useScroll()
  watch(isReachBottom, (newValue) => {
    if (newValue) {
      homeStore.fetchHouseListData().then(() => {
        isReachBottom.value = false
      })
    }
  })
  // 搜索框显示控制
  const isShowSearchBar = computed(() => {
    return scrollTop.value >= 300
  })
// 跳转回home时, 保留原来的位置
//   onActivated(() => {
//     homeRef.value?.scrollTop({
//       top: scrollTop.value
//     })
//   })


</script>

<style scoped>
  /* .home {
    height: 100vh;
    overflow-y: auto;
  } */
  .banner img {
    width: 100%;
  }
  .searchBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 45px;
    padding: 16px 16px 10px;
    background-color: #fff;
    z-index: 9;
  }
</style>
